<!DOCTYPE html>
<html>

  <head>
    <meta name="keywords" content="camicroscope, quip" />
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
    <title>CaMicroscope - User Signup</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

    <link rel='stylesheet' type='text/css' media='all' href='../../css/normalize.css'/>
    <link rel='stylesheet' type='text/css' media='all' href='signup.css'/>
    <link rel='stylesheet' type='text/css' media='all' href='../../css/popup.css'/>

    <!-- JQuery -->
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <!-- Bootstrap core JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"></script>
    <!-- Bootstrap tooltips -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>



  </head>
  <script src="../../core/Store.js"></script>
  <script src="./signup.js"></script>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item link">
            <a class="nav-link" href="../landing/landing.html"> <i class="fas fa-home"></i> Home</a>
          </li>
          <li class="nav-item link">
            <a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i>  Slides</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item active link" style="font-family: sans-serif;">
            <a class="nav-link" href="./signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
          </li>
          <li class="nav-item link">
            <a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="signup-form">
      <div
        style="text-align:center; background: #17a2b8; font-size: xx-large; color: white; padding: 4px; border-radius: 5px 5px 0px 0px;">
        caMicroscope
      </div>
      <!-- <hr style="width: 24.25em;  height: 0.01em; background-color: black; margin-top: 0em; margin-bottom: 0;"> -->

      <form id="userForm" onsubmit="return false;">
        <h2 style="margin-top: -.5em;">User Signup</h2>
        <hr
          style="width: 24.25em; margin-left: -1.9em; height: 0.01em; background-color: rgb(172, 172, 172); margin-bottom: 2em;">
        <div class="form-group">
        </div>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope" style="margin-top: 0.5em;"></i></span>
            <input id="mail" type="email" class="form-control" name="email" placeholder="Email" required="required">
          </div>
        </div>
        <br>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-th-list" style="margin-top: 0.5em;"></i></span>
            <input type="text" id="filters" class="form-control" placeholder="['list','of','filters']"
              required="required">
          </div>
        </div> <br>

        <!-- User Type selection -->
        <select id="attr" class="browser-default custom-select">
          <option selected value="1">Viewer</option>
          <option value="2">Editor</option>
          <option value="3">Admin</option>
        </select>

        <br> <br>
        <div class="form-group">
          <button type="submit" id="sub" class="btn btn-primary btn-block btn-lg sub-btn" onclick="addUser()" disabled>
            Please wait ...
          </button>
        </div>
        <!-- <p class="small text-center">This form is only useful to Admin users. If you reach this page, it's likely that you tried to log into this instance but lack
          access. Email the administrator if you want to be added.</p> -->
        <p class="small text-center">
          Non-admin users have to submit a request ticket to admins to get their approval to signup new users.
          If you are an Admin, you can directly signup users.
        </p>
      </form>
      <div class="text-center">Already have an account? </div>
    </div>
    <!-- popup -->
    <div id="popup-container"></div>


    <script src="../../common/util.js"></script>

  </body>
</html>
